<template>
	<view class="content">
		<scroll-view :scroll-y="true" :style="{'height':windowHeight+'px'}" v-if="blacklist.length > 0">
			<block v-for="(item,index) in blacklist" :key="index">
				<view class="good-item">
					<view class="good-info">
						<view style="display: flex;">
							<image class="info-left" :src="item.user.avatar" @click="goToFriendInfo(item.user)"></image>
							<view class="info-right">
								<view class="name">{{item.user.username}}</view>
							</view>
						</view>
						<view class="time-info" @click="deleteBlacklist(item.user)">移除</view>
					</view>
				</view>
			</block>
		</scroll-view>
		<view v-else style="display: flex; align-items: center; justify-content: center; flex-direction: column;">
			<image src="https://goeasy-im2-1302606804.cos.ap-guangzhou.myqcloud.com/avatar/empty.png" mode="widthFix" style="width: 200rpx; color: gray;"></image>
			<view style="color: gray;">黑名单为空</view>
		</view>
	</view>
</template>

<script>
	import {
		delBlacklist,
		queryBlacklist
	} from '../../api/login.js';
	export default {
		data() {
			return {
				windowHeight: 0, //可视区域的高度
				blacklist: []
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight;
				}
			});
			this.getBlacklist()
		},
		methods: {
			goToFriendInfo(userInfo) {
				let item = {
					userId: userInfo.uuid
				}
				uni.navigateTo({
					url: '/pages_subpackage/friendInfo/index?item=' + encodeURIComponent(JSON.stringify(item))
				});
			},
			getBlacklist() {
				queryBlacklist({
					id: uni.getStorageSync("userId")
				}).then(res => {
					this.blacklist = res.data
				}).catch(err => {
					this.blacklist = []
				})
			},
			deleteBlacklist(user) {
				delBlacklist({
					userId: user.id,
					operaterId: uni.getStorageSync("userId")
				}).then(res => {
					uni.showToast({
						title: "成功",
						icon: "success",
						duration: 1000
					})
				}).catch(err => {
					uni.showToast({
						title: "操作失败",
						icon: "fail",
						duration: 1000
					})
				})
				setTimeout(() => {
					this.getBlacklist()
				}, 1000)
			}

		}
	}
</script>

<style lang="scss" scoped>
	.good-item {
		position: relative;
		width: 100%;
		background: #fff;
		display: flex;

		// margin-bottom: 30rpx;
		.good-info {
			display: flex;
			padding: 20rpx;
			font-size: 28rpx;
			justify-content: space-around;
			width: 100%;

			.info-left {
				width: 120rpx;
				height: 120rpx;
				margin-right: 16rpx;
			}

			.info-right {
				display: flex;
				align-items: center;
				width: 420rpx;
				padding-left: 10rpx;

				.name {
					font-size: 40rpx;
				}

				.price {
					padding: 10rpx 0;
					font-size: 32rpx;
				}
			}

			.time-info {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: #dd524d;
			}

		}

		.del-btn {
			position: absolute;
			top: 0;
			right: -140rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 20;
			width: 140rpx;
			height: 100%;
			background: #007AFF;
			color: #fff;
		}
	}

	.nav-counter {
		position: absolute;
		top: 0px;
		right: 0px;
		min-width: 8px;
		height: 20px;
		line-height: 20px;
		margin-top: -11px;
		padding: 0 6px;
		font-weight: normal;
		color: white;
		text-align: center;
		text-shadow: 0 1px rgba(0, 0, 0, 0.2);
		background: #e23442;
		// border: 1px solid #911f28;
		border-radius: 11px;
		background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
		background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
		background-image: -o-linear-gradient(top, #e8616c, #dd202f);
		background-image: linear-gradient(to bottom, #e8616c, #dd202f);
		-webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
		box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
	}


	page {
		background: #f4f4f4;
	}
</style>